<template>
  <div class="device-list">
    <div style="margin-top: -20px;">
      <el-menu :default-active="activeName" class="el-menu-demo" mode="horizontal" @select="handleClick">
        <el-menu-item index="online">线上管理</el-menu-item>
        <el-menu-item index="offline">线下管理</el-menu-item>
      </el-menu>
    </div>
    <ul class="global-operation-list" v-if="activeName == 'online'" style="margin-top: 20px;">
      <li class="global-operation-left">
        <ul class="global-filter-list">
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">关键字：</h2>
            <el-input v-model="searchForm.keyword" @change="getPost" placeholder="名称" clearable></el-input>
          </li>
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">账号属性：</h2>
            <el-select v-model="searchForm.userType" placeholder="请选择" clearable>
              <el-option v-for="item in onlineUserType" :key="item.id" :label="item.sysValueName" :value="item.id">
              </el-option>
            </el-select>
          </li>

          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search"
              :style="{background: $store.state.theme.theme_color || '#03C192', border: 'none'}"
              @click="rePosts()">搜索</el-button>
          </li>
          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search"
              v-if="operationList.includes('addOnline') && activeName=='online'" @click="addOnline">添加</el-button>
            <el-button type="primary" class="global-filter-item-search"
              v-if="operationList.includes('addOffline') && activeName=='offline'" @click="addOffline">添加</el-button>
          </li>
        </ul>
      </li>
    </ul>
    <div class="global-table-content" v-if="activeName == 'online'">
      <div class="global-table">
        <el-table :data="dataList" :header-cell-style="{
            background: '#F6F7FA',
            color: '#333',
            height: '60px',
          }" v-loading="tableLoading" :row-style="{height: '0'}" :cell-style="{padding: '3px'}" max-height="700" border
          v-if="dataList && dataList.length > 0">
          <el-table-column prop="plateName" label="名称" show-overflow-tooltip></el-table-column>

          <el-table-column label="账号属性" prop="userTypeName" show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="粉丝量级" prop="fans" show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="cost" label="成本" show-overflow-tooltip></el-table-column>

          <el-table-column prop="goodPrice" label="匹配货值" show-overflow-tooltip></el-table-column>

          <el-table-column prop="createType" label="创作类型" show-overflow-tooltip></el-table-column>

          <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>

          <el-table-column prop="steadyContent" label="注意点" show-overflow-tooltip></el-table-column>

          <el-table-column prop="oneInteractionNum" label="预估单次互动量" show-overflow-tooltip></el-table-column>

          <el-table-column prop="oneExposureNum" label="预估单个曝光量" show-overflow-tooltip></el-table-column>

          <el-table-column prop="pic" label="图片">
            <template slot-scope="scope">
              <el-image v-if="scope.row.pic" style="width: 100px; height: 100px" :src="scope.row.pic"
                fit="fill"></el-image>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="200px">
            <template slot-scope="scope">
              <div>
                <el-button v-if="operationList.includes('updateOnline')" style="font-size: 14px;" type="text"
                  @click="handleCommand(1, scope.row) && scope.row.mediumType == 2">修改</el-button>
              </div>
              <div>
                <el-popconfirm title="确定删除该值吗？" @confirm="handleCommand(2, scope.row)">
                  <el-button slot="reference" v-if="operationList.includes('delOnline') && scope.row.mediumType == 2"
                    style="font-size: 14px;" type="text">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="no-data" v-else
          style="height: calc(100vh - 130px - 80px);display: flex;align-items: center;justify-content: center;flex-direction: column">
          <img style="width: 265px;height: 120px;margin-bottom: 32px" src="@/assets/images/tyNoData.png" alt="" />
          <div style="font-size: 16px;color: #A5A9B5">暂无数据~</div>
        </div>
      </div>
      <div class="global-page">
        <div class="global-page-left">
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes"
          :page-size="pageSize" :current-page="pageNum" background layout="sizes, total, prev, pager, next"
          :total="total"></el-pagination>
      </div>
    </div>
    <ul class="global-operation-list" v-if="activeName == 'offline'" style="margin-top: 20px;">
      <li class="global-operation-left">
        <ul class="global-filter-list">
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">关键字：</h2>
            <el-input v-model="searchForm.keyword" @change="getOffPost" placeholder="名称" clearable></el-input>
          </li>
          <li class="global-filter-item">
            <h2 class="global-filter-item-title">线下类型：</h2>
            <el-select v-model="searchForm.offlineType" placeholder="请选择">
              <el-option v-for="item in offlineTypeList" :key="item.id" :label="item.sysValueName" :value="item.id">
              </el-option>
            </el-select>
          </li>

          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search" style="background: #03C192;border: none;"
              @click="rePosts()">搜索</el-button>
          </li>
          <li class="global-filter-item">
            <el-button type="primary" class="global-filter-item-search"
              v-if="operationList.includes('addOnline') && activeName=='online'" @click="addOnline">添加</el-button>
            <el-button type="primary" class="global-filter-item-search"
              v-if="operationList.includes('addOffline') && activeName=='offline'" @click="addOffline">添加</el-button>
          </li>
        </ul>
      </li>
    </ul>
    <div class="global-table-content" v-if="activeName == 'offline'">
      <div class="global-table">
        <el-table :data="dataList" :header-cell-style="{
            background: '#F6F7FA',
            color: '#333',
            height: '60px',
          }" v-loading="tableLoading" :row-style="{height: '0'}" :cell-style="{padding: '3px'}" max-height="700" border
          v-if="dataList && dataList.length > 0">
          <el-table-column :prop="item.value" :label="item.label" show-overflow-tooltip
            v-for="(item, index) in offlineModelMap[searchForm.offlineType]" :key="index">
            <template slot-scope="scope">
              {{ scope.row[item.value] }}
            </template>
          </el-table-column>

          <el-table-column prop="pic" label="图片">
            <template slot-scope="scope">
              <el-image v-if="scope.row.pic" style="width: 100px; height: 100px" :src="scope.row.pic"
                :preview-src-list="[scope.row.pic]" fit="fill"></el-image>
            </template>
          </el-table-column>

          <el-table-column prop="num" label="一天可以投放的数量">
          </el-table-column>

          <el-table-column prop="showRemark" label="显示备注">
          </el-table-column>
          <el-table-column prop="status" label="状态" :formatter="formatterOfflineStatus">
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="200px">
            <template slot-scope="scope">
              <div>
                <el-button v-if="operationList.includes('updateOffline')" style="font-size: 14px;" type="text"
                  @click="handleCommand(3, scope.row)">修改</el-button>
              </div>
              <div>
                <el-popconfirm title="确定删除该值吗？" @confirm="handleCommand(4, scope.row)">
                  <el-button slot="reference" v-if="operationList.includes('delOffline')" style="font-size: 14px;"
                    type="text">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="no-data" v-else
          style="height: calc(100vh - 130px - 80px);display: flex;align-items: center;justify-content: center;flex-direction: column">
          <img style="width: 265px;height: 120px;margin-bottom: 32px" src="@/assets/images/tyNoData.png" alt="" />
          <div style="font-size: 16px;color: #A5A9B5">暂无数据~</div>
        </div>
      </div>
      <div class="global-page">
        <div class="global-page-left">
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="pageSizes"
          :page-size="pageSize" :current-page="pageNum" background layout="sizes, total, prev, pager, next"
          :total="total"></el-pagination>
      </div>
    </div>

    <!-- 线上媒体新增编辑 -->
    <el-dialog :title="onlineFormTitle" :visible.sync="addOnlineDialogVisible" width="70%"
      :before-close="addOnlineHandleClose">
      <div>
        <el-form :model="addOnlineForm" :rules="addOnlineRules" ref="addOnlineForm">
          <el-form-item label="名称" prop="plateName" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.plateName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号属性" prop="userType" :label-width="formLabelWidth">
            <el-select v-model="addOnlineForm.userType" placeholder="请选择">
              <el-option v-for="(item,index) in onlineUserType" :key="index" :label="item.sysValueName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="粉丝量级" prop="fans" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.fans" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="成本" prop="cost" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.cost" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="匹配货值" prop="goodPrice" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.goodPrice" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创作类型" prop="createType" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.createType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="注意点" prop="steadyContent" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="2" v-model="addOnlineForm.steadyContent" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="预估单次互动量" prop="oneInteractionNum" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.oneInteractionNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="预估单个曝光量" prop="oneExposureNum" :label-width="formLabelWidth">
            <el-input v-model="addOnlineForm.oneExposureNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="pic" :label-width="formLabelWidth">
            <el-upload class="upload-demo" drag :action="url" :on-progress="uploadFileLoading"
              :data="{ token: $store.state.token }" :headers="{ 'Access-Control-Allow-Origin': '*' }"
              :show-file-list="false" :http-request="checkedFile">
              <img v-if="addOnlineForm.pic" :src="addOnlineForm.pic" class="avatar">
              <div v-else>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOnlineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOnlineSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 线下媒体新增编辑 -->
    <el-dialog :title="offlineFormTitle" :visible.sync="addOfflineDialogVisible" width="70%"
      :before-close="addOfflineHandleClose">
      <div>
        <el-form :model="addOfflineForm" :rules="addOfflineRules" ref="addOfflineForm">
          <el-form-item label="类型" prop="excelShowTitleId" :label-width="formLabelWidth">
            <el-select v-model="addOfflineForm.excelShowTitleId" placeholder="请选择">
              <el-option v-for="(item,index) in exportNameList" :key="index" :label="item.sysValueName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="item.label" :prop="item.value" :label-width="formLabelWidth"
            v-for="(item, index) in offlineModelMap[addOfflineForm.excelShowTitleId]" :key="index">
            <div style="display: flex;" v-if="item.value == 'putInCycle'">
              <el-input v-model="addOfflineForm.putInCycle" autocomplete="off" width="30%" type="number"></el-input>
              <el-select v-model="addOfflineForm.putInCycleType" placeholder="请选择">
                <el-option v-for="item in putInCycleTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <el-input v-model="addOfflineForm[item.value]" autocomplete="off" v-else></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="pic" :label-width="formLabelWidth">
            <el-upload class="upload-demo" drag :action="url" :on-progress="uploadFileLoading"
              :data="{ token: $store.state.token }" :headers="{ 'Access-Control-Allow-Origin': '*' }"
              :show-file-list="false" :http-request="checkedFile">
              <img v-if="addOfflineForm.pic" :src="addOfflineForm.pic" class="avatar">
              <div v-else>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="一天可以投放的数量" prop="num" :label-width="formLabelWidth">
            <el-input v-model="addOfflineForm.num" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目排队位" prop="lineUpNum" :label-width="formLabelWidth">
            <el-input v-model="addOfflineForm.lineUpNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="媒体城市" prop="cityShow" :label-width="formLabelWidth">
            <el-select v-model="addOfflineForm.cityShow" placeholder="请选择媒体城市" filterable>
              <el-option v-for="item in cityShowList" :key="item.id" :label="item.sysValueName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="媒体方" prop="mediaParty" :label-width="formLabelWidth">
            <el-select v-model="addOfflineForm.mediaPartyId" placeholder="请选择媒体方" filterable>
              <el-option v-for="item in mediaPartyList" :key="item.id" :label="item.mediaPartyName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="媒体类型" prop="stationType" :label-width="formLabelWidth">
            <el-radio-group v-model="addOfflineForm.stationType">
              <el-radio :label="1">自营</el-radio>
              <el-radio :label="2">外采</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示备注" prop="showRemark" :label-width="formLabelWidth">
            <el-input v-model="addOfflineForm.showRemark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
            <el-select v-model="addOfflineForm.status" placeholder="请选择状态" filterable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOfflineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOfflineSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "@/api/apiMedium";
import APISysLabel from "@/api/apiSysLabel";
import axios from "axios";
import APIMediaParty from "@/api/apiMediaParty";

export default {
  name: "MediumList",
  props: {
    operationList: Array,
  },
  data() {
    return {
      tokenData: {
        token: localStorage.getItem("mujingtoken")
      },
      searchForm: {
        keyword: "",
        userType: null,
        offlineType: null,
      },
      tableLoading: false,
      dataList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      pageSizes: [10, 20, 50, 100],
      formLabelWidth: '120px',
      activeName: 'online',
      onlineUserType: [],
      addOnlineDialogVisible: false,
      addOnlineForm: {
        plateName: '',
        onlineUserType: null,
        fans: '',
        cost: '',
        goodPrice: '',
        id: null,
        remark: '',
        createType: '',
        steadyContent: '',
        pic: '',
        oneInteractionNum: '',
        oneExposureNum: '',
      },
      addOnlineRules: {
        plateName: { required: true, message: '请输入名称', trigger: 'blur' },
        userType: { required: true, message: '请选择账号属性', trigger: 'change' },
        fans: { required: true, message: '请输入粉丝量级', trigger: 'blur' },
      },
      onlineFormTitle: '新增线上媒体',
      addOfflineDialogVisible: false,
      addOfflineForm: {
        id: null,
        province: '',
        city: '',
        area: '',
        address: '',
        name: '',
        offlineType: null,
        excelShowTitleId: null,
        level: '',
        predictDayPersonNum: '',
        screenNum: '',
        positionSpecs: '',
        oneDayOperationTime: '',
        publicationSeconds: '',
        broadcastFrequency: '',
        putInCycle: '',
        putInCycleType: '周',
        cost: '',
        goodPrice: '',
        startTime: null,
        expirationTime: null,
        num: null,
        cityNum: '',
        posterNumber: '',
        totalOfficeNum: '',
        totalSeatNum: '',
        remark: '',
        sourceMaterialRequired: '',
        pic: '',
        coverContent: '',
        steadyContent: '',
        stationType: 1,
        lineUpNum:0,
        showRemark: '',
        status: 1,
      },
      offlineFormTitle: '新增线下媒体',
      addOfflineRules: {
        province: { required: true, message: '请输入省', trigger: 'blur' },
        city: { required: true, message: '请输入市', trigger: 'blur' },
        name: { required: true, message: '请输入名称', trigger: 'blur' },
        num: { required: true, message: '请输入上刊数', trigger: 'blur' },
        lineUpNum:{ required: true, message: '请输入排队位数量', trigger: 'blur'}
      },
      offlineTypeList: [],
      uploadLoading: false,
      url: '',
      putInCycleTypeList: [
        {
          label: '天',
          value: '天',
        },
        {
          label: '周',
          value: '周',
        },
        {
          label: '月',
          value: '月',
        },
      ],
      exportNameList: [],
      offlineModel: {
        "出租车后窗静态投影": {
          "序号": "排序",
          "覆盖地区": "address",
          "刊播秒数(秒)": "publication_seconds",
          "时间": "one_day_operation_time",
          "单周货值价(元/台)": "good_price",
          "预估曝光量(次/天)": "predict_day_person_num",
          "上刊周数(周)": "num",
          "合计货值价(元)": "最终合计",
        },
        "梯媒-电子屏": {
          "序号": "排序",
          "覆盖地区": "address",
          "播出频次(次/面/天)": "broadcast_frequency",
          "单周货值价(元/台)": "good_price",
          "预估曝光量(次/天)": "predict_day_person_num",
          "上刊周数(周)": "num",
          "数量(台)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "梯媒-电子屏-新潮": {
          "序号": "排序",
          "覆盖地区": "address",
          "投放模式": "put_type",
          "秒数、播出频次(次/面/天)": "broadcast_frequency",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "数量(台)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "梯媒-框架": {
          "序号": "排序",
          "覆盖地区": "address",
          "模式": "put_type",
          "备注": "remark",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "数量(台)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "社区门禁-电子屏": {
          "序号": "排序",
          "覆盖地区": "address",
          "刊播秒数(秒)": "publication_seconds",
          "播出频次(次/面/天)": "broadcast_frequency",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "数量(台)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "超市价签屏": {
          "序号": "排序",
          "覆盖地区": "address",
          "刊播秒数(秒)": "publication_seconds",
          "播出频次(次/面/天)": "broadcast_frequency",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "数量(台)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "自助收银屏": {
          "序号": "排序",
          "覆盖地区": "address",
          "卖场点位": "screen_position",
          "秒数、播出频次(次/屏/天)": "broadcast_frequency",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "数量(台)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "影院一": {
          "序号": "排序",
          "覆盖": "address",
          "屏幕数量": "screen_num",
          "刊播秒数(秒)": "publication_seconds",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "上刊时间": "one_day_operation_time",
          "合计货值价(元)": "最终合计",
        },
        "影院二": {
          "序号": "排序",
          "覆盖": "address",
          "屏幕数量": "screen_num",
          "刊播秒数(秒)": "publication_seconds",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "上刊时间": "one_day_operation_time",
          "合计货值价(元)": "最终合计",
        },
        "影院三": {
          "序号": "排序",
          "覆盖": "address",
          "屏幕数量": "screen_num",
          "刊播秒数(秒)": "publication_seconds",
          "单周货值价(元/台)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "上刊时间": "one_day_operation_time",
          "合计货值价(元)": "最终合计",
        },
        "映前广告": {
          "序号": "排序",
          "覆盖地区": "address",
          "播放时间": "screen_position",
          "刊播秒数(秒)": "publication_seconds",
          "单价(元/场)": "good_price",
          "单次最低上刊周数(周)": "num",
          "预估曝光量": "predict_day_person_num",
          "场次": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "映前广告-万达影院": {
          "序号": "排序",
          "覆盖地区": "address",
          "播放时间": "screen_position",
          "刊播秒数(秒)": "publication_seconds",
          "单价(元/场)": "good_price",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "厅数(厅)": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "UC浏览器 外渠神马搜索": {
          "序号": "排序",
          "覆盖": "address",
          "APP名称": "name",
          "曝光量": "predict_day_person_num",
          "展现形式": "show_type_content",
          "位置": "position_specs",
          "备注": "remark",
          "合计货值价(元)": "最终合计",
        },
        "高铁-外采": {
          "序号": "排序",
          "所属城市": "city",
          "高铁站名": "name",
          "位置规格": "position_specs",
          "刊播秒数、频次": "publication_seconds",
          "预估曝光量": "predict_day_person_num",
          "上刊周数(周)": "num",
          "屏幕数量（面）": "screen_num",
          "合计货值价(元)": "最终合计",
        },
        "高铁-自营": {
          "序号": "排序",
          "高铁站名": "name",
          "位置规格": "position_specs",
          "刊播秒数、频次": "publication_seconds",
          "屏幕数量（面）": "screen_num",
          "预估日均客流量": "predict_day_person_num",
          "预估合计曝光量": "broadcast_frequency",
          "单周货值价(元)": "good_price",
          "上刊周数(周)": "num",
          "合计货值价(元)": "最终合计",
        },
        "顺丰同城APP": {
          "序号": "排序",
          "覆盖": "address",
          "APP名称": "name",
          "展示方式": "show_type_content",
          "位置": "screen_position",
          "预计曝光量pv": "predict_day_person_num",
          "上刊天数": "num",
          "合计货值价(元)": "最终合计",
        },
        "机场智能手推车广告": {
          "序号": "排序",
          "所属城市": "city",
          "机场名": "name",
          "广告形式": "show_type_content",
          "刊播秒数、频次": "publication_seconds",
          "预估曝光量": "predict_day_person_num",
          "上刊周数": "num",
          "屏幕数量（面）": "screen_num",
          "刊例单价（元/周）": "最终合计",
        },
        "商场超级屏": {
          "序号": "排序",
          "城市": "city",
          "商场": "name",
          "屏幕位置": "screen_position",
          "商场数量": "market_num",
          "单个商场单周预估曝光量": "predict_day_person_num",
          "预估合计曝光量": "broadcast_frequency",
          "展现形式": "show_type_content",
          "上刊周数": "num",
          "合计货值价(元)": "最终合计",
        },
        "机场": {
          "序号": "排序",
          "机场名": "name",
          "位置规格": "position_specs",
          "刊播秒数、频次": "publication_seconds",
          "屏幕数量（面）": "screen_num",
          "预估日均客流量": "predict_day_person_num",
          "预估合计曝光量": "broadcast_frequency",
          "单周货值价(元)": "good_price",
          "上刊周数(周)": "num",
          "合计货值价(元)": "最终合计",
        },
        "地铁便民信息屏*套餐一": {
          "序号": "排序",
          "城市": "city",
          "位置": "position_specs",
          "画面尺寸": "one_day_operation_time",
          "秒数频次": "publication_seconds",
          "屏幕数量*不可选点": "screen_num",
          "预估合计曝光量": "broadcast_frequency",
          "单周货值价(元)": "good_price",
          "上刊周数(周)": "num",
          "合计货值价(元)": "最终合计",
        },
        "地铁便民信息屏*套餐二": {
          "序号": "排序",
          "城市": "city",
          "位置": "position_specs",
          "画面尺寸": "one_day_operation_time",
          "秒数频次": "publication_seconds",
          "屏幕数量": "screen_num",
          "预估合计曝光量": "broadcast_frequency",
          "单周货值价(元)": "good_price",
          "上刊周数(周)": "num",
          "合计货值价(元)": "最终合计",
        },
        "户外大屏": {
          "序号": "排序",
          "城市": "city",
          "位置": "position_specs",
          "显示屏规格（宽×高，单位：米）": "one_day_operation_time",
          "秒数频次": "publication_seconds",
          "预估曝光量": "predict_day_person_num",
          "单周货值价(元/台)": "good_price",
          "上刊周数(周)": "num",
          "合计货值价(元)": "最终合计",
        },
      },
      offlineModelMap: {
        519: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "时间",
            value: "oneDayOperationTime",
          },
          {
            label: "预估曝光量(次/天)",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        520: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "播出频次(次/面/天)",
            value: "broadcastFrequency",
          },
          {
            label: "预估曝光量(次/天)",
            value: "predictDayPersonNum",
          },
          {
            label: "数量(台)",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        521: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "投放模式",
            value: "putType",
          },
          {
            label: "秒数、播出频次(次/面/天)",
            value: "broadcastFrequency",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "数量(台)",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        522: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "模式",
            value: "putType",
          },
          {
            label: "备注",
            value: "remark",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "数量(台)",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        523: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "播出频次(次/面/天)",
            value: "broadcastFrequency",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "数量(台)",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        524: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "播出频次(次/面/天)",
            value: "broadcastFrequency",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "数量(台)",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        525: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "卖场点位",
            value: "screenPosition",
          },
          {
            label: "秒数、播出频次(次/屏/天)",
            value: "broadcastFrequency",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "数量(台)",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        494: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖",
            value: "address",
          },
          {
            label: "屏幕数量",
            value: "screenNum",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "上刊时间",
            value: "oneDayOperationTime",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        527: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖",
            value: "address",
          },
          {
            label: "屏幕数量",
            value: "screenNum",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "上刊时间",
            value: "oneDayOperationTime",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        528: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖",
            value: "address",
          },
          {
            label: "屏幕数量",
            value: "screenNum",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "上刊时间",
            value: "oneDayOperationTime",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        526: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "播放时间",
            value: "screenPosition",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "场次",
            value: "screenNum",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        529: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "覆盖地区",
            value: "address",
          },
          {
            label: "播放时间",
            value: "screenPosition",
          },
          {
            label: "刊播秒数(秒)",
            value: "publicationSeconds",
          },
          {
            label: "场次",
            value: "screenNum",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        530: [
          {
            label: "APP名称",
            value: "name",
          },
          {
            label: "覆盖",
            value: "address",
          },
          {
            label: "曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "展现形式",
            value: "showTypeContent",
          },
          {
            label: "位置",
            value: "positionSpecs",
          },
          {
            label: "备注",
            value: "remark",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        496: [
          {
            label: "高铁站名",
            value: "name",
          },
          {
            label: "所属城市",
            value: "city",
          },
          {
            label: "位置规格",
            value: "positionSpecs",
          },
          {
            label: "刊播秒数、频次",
            value: "publicationSeconds",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "屏幕数量（面）",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        534: [
          {
            label: "高铁站名",
            value: "name",
          },
          {
            label: "所属城市",
            value: "city",
          },
          {
            label: "位置规格",
            value: "positionSpecs",
          },
          {
            label: "刊播秒数、频次",
            value: "publicationSeconds",
          },
          {
            label: "屏幕数量（面）",
            value: "screenNum",
          },
          {
            label: "预估日均客流量",
            value: "predictDayPersonNum",
          },
          {
            label: "预估合计曝光量",
            value: "broadcastFrequency",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        531: [
          {
            label: "APP名称",
            value: "name",
          },
          {
            label: "覆盖",
            value: "address",
          },
          {
            label: "展示方式",
            value: "showTypeContent",
          },
          {
            label: "位置",
            value: "screenPosition",
          },
          {
            label: "预计曝光量pv",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        532: [
          {
            label: "机场名",
            value: "name",
          },
          {
            label: "所属城市",
            value: "city",
          },
          {
            label: "广告形式",
            value: "showTypeContent",
          },
          {
            label: "刊播秒数、频次",
            value: "publicationSeconds",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "屏幕数量（面）",
            value: "screenNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        495: [
          {
            label: "商场名",
            value: "name",
          },
          {
            label: "城市",
            value: "city",
          },
          {
            label: "屏幕位置",
            value: "screenPosition",
          },
          {
            label: "商场数量",
            value: "marketNum",
          },
          {
            label: "单个商场单周预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "预估合计曝光量",
            value: "broadcastFrequency",
          },
          {
            label: "展现形式",
            value: "showTypeContent",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        497: [
          {
            label: "机场名",
            value: "name",
          },
          {
            label: "位置规格",
            value: "positionSpecs",
          },
          {
            label: "刊播秒数、频次",
            value: "publicationSeconds",
          },
          {
            label: "屏幕数量（面）",
            value: "screenNum",
          },
          {
            label: "预估日均客流量",
            value: "predictDayPersonNum",
          },
          {
            label: "预估合计曝光量",
            value: "broadcastFrequency",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        533: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "城市",
            value: "city",
          },
          {
            label: "位置",
            value: "positionSpecs",
          },
          {
            label: "画面尺寸",
            value: "oneDayOperationTime",
          },
          {
            label: "秒数频次",
            value: "publicationSeconds",
          },
          {
            label: "屏幕数量*不可选点",
            value: "screenNum",
          },
          {
            label: "预估合计曝光量",
            value: "broadcastFrequency",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        535: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "城市",
            value: "city",
          },
          {
            label: "位置",
            value: "positionSpecs",
          },
          {
            label: "画面尺寸",
            value: "oneDayOperationTime",
          },
          {
            label: "秒数频次",
            value: "publicationSeconds",
          },
          {
            label: "屏幕数量",
            value: "screenNum",
          },
          {
            label: "预估合计曝光量",
            value: "broadcastFrequency",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
        498: [
          {
            label: "名称",
            value: "name",
          },
          {
            label: "城市",
            value: "city",
          },
          {
            label: "位置",
            value: "positionSpecs",
          },
          {
            label: "显示屏规格（宽×高，单位：米）",
            value: "oneDayOperationTime",
          },
          {
            label: "秒数频次",
            value: "publicationSeconds",
          },
          {
            label: "预估曝光量",
            value: "predictDayPersonNum",
          },
          {
            label: "投放周期",
            value: "putInCycle",
          },
          {
            label: "成本",
            value: "cost",
          },
          {
            label: "匹配货值",
            value: "goodPrice",
          },
        ],
      },
      cityShowList: [],
      mediaPartyList: [],
      statusList: [
        {
          label: '合作中',
          value: 1,
        },
        {
          label: '已到期',
          value: 2,
        },
        {
          label: '待签约',
          value: 3,
        }
      ],
    };
  },
  activated() {
    // this.url = "https://checkorder.mejour.cn/checkorder/manager/pc/user/uploadFile?token=" + this.$store.state.token
    this.url = process.env.VUE_APP_REQUSET_URL + "/checkorder/manager/pc/user/uploadFile?token=" + this.$store.state.token;
    this.activeName = 'online';
    this.getSysLabel21();
    this.pageNum = 1;
    this.dataList = [];
    this.getPost();
  },
  created() {},
  mounted() {
      this.$bus.$on('clearSearchParams', () => {
            this.searchForm = {
            keyword: "",
            userType: null,
            offlineType: null,
          }
        })
  },
  methods: {
    getMediaPartyList(){
      let params = {}
      APIMediaParty.getMediaPartyList(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.mediaPartyList = res.list;
        }
      });
    },
    checkedFile(obj){
        let that = this
        let url = this.url;
        const formData = new FormData();
        formData.append( "file" , obj.file );//file 和 后端字段要保持一致
        formData.append("token", this.$store.state.token)
        const config = {
            headers: {
                'Access-Control-Allow-Origin': '*',
                token: this.$store.state.token
            },
            timeout: 1000 * 60 * 10 //这里2分钟内的配置是生效的，超过了就不行。。
        };
        const loading = this.$loading({
            lock: true,
            text: '上传中，若数据量过大，则时间较长，在此期间请勿操作，请等待......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        return axios.post(url, formData,config)
            .then((rs) => {
                console.log(rs)
                if (rs.status ===200){
                    console.log(rs.data)
                    let data = rs.data
                    if ( data.key === 1000 ){
                      if(this.activeName == 'online'){
                        this.addOnlineForm.pic = data.result.data
                      }else if(this.activeName == 'offline'){
                        this.addOfflineForm.pic = data.result.data
                      }
                        that.$message.success({
                            showClose: true,
                            message: "上传成功",
                            duration: 1500
                        });
                    }else {
                        that.$message({
                            type: "warning",
                            message: rs.data.message,
                        });
                    }
                }else {
                    that.$message({
                        type: "warning",
                        message: rs,
                    });
                }
                loading.close();
                })
                .catch( (rs) => {
                    loading.close();
                    this.$message({
                        type: "error",
                        message:  rs,
                    });
                });
    },
    uploadFileLoading(e){
        this.uploadLoading = true
    },
    addOfflineSubmit(){
      this.$refs['addOfflineForm'].validate((valid) => {
        if (valid) {
          this.$bus.$emit("show-loading", true);
          const params = this.addOfflineForm;
          if(params.putInCycle){
            if(!params.putInCycleType){
              this.$message({
                type: 'error',
                message: '请选择周期类型',
              });
              return;
            }
          }
          if(params.putInCycleType){
            params.putInCycle = params.putInCycle + params.putInCycleType
          }
          if(params.id){
            API.doUpdateOfflineMedium(params).then((res) => {
              if (res.key === 1000) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.addOfflineDialogVisible = false;
                this.rePosts();
              }
              this.$bus.$emit("show-loading", false);
            });
          }else{
            API.doAddOfflineMedium(params).then((res) => {
              if (res.key === 1000) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.addOfflineDialogVisible = false;
                this.rePosts();
              }
              this.$bus.$emit("show-loading", false);
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addOfflineHandleClose() {
      this.addOfflineDialogVisible = false;
    },
    addOffline() {
      this.offlineFormTitle = "新增线下媒体";
      this.addOfflineForm = {
        id: null,
        province: '',
        city: '',
        area: '',
        address: '',
        name: '',
        offlineType: null,
        excelShowTitleId: null,
        level: '',
        predictDayPersonNum: '',
        screenNum: '',
        positionSpecs: '',
        oneDayOperationTime: '',
        publicationSeconds: '',
        broadcastFrequency: '',
        putInCycle: '',
        putInCycleType: '周',
        cost: '',
        goodPrice: '',
        startTime: null,
        expirationTime: null,
        num: null,
        cityNum: '',
        posterNumber: '',
        totalOfficeNum: '',
        totalSeatNum: '',
        remark: '',
        sourceMaterialRequired: '',
        pic: '',
        coverContent: '',
        steadyContent: '',
        stationType: 1,
        lineUpNum:0,
        cityShow: null,
        mediaPartyId: null,
        showRemark: '',
        status: 1,
      };
      this.getMediaPartyList()
      this.addOfflineDialogVisible = true;
    },
    handleCommand(type, row) {
      if(type == 1){
        this.addOnlineForm = row;
        this.addOnlineDialogVisible = true;
        this.onlineFormTitle = '修改线上媒体';
      } else if(type == 2){
        let params = {
          id: row.id
        }
        API.doDelOnlineMedium(params).then((res) => {
          if (res.key === 1000) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.rePosts();
          }
          this.$bus.$emit("show-loading", false);
        });
      } else if(type == 3){
        this.addOfflineForm = row;
        this.addOfflineDialogVisible = true;
        this.getMediaPartyList()
        this.offlineFormTitle = '修改线下媒体';
      } else if(type == 4){
        let params = {
          id: row.id
        }
        API.doDelOfflineMedium(params).then((res) => {
          if (res.key === 1000) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.rePosts();
          }
          this.$bus.$emit("show-loading", false);
        });
      }
    },
    addOnlineSubmit(){
      this.$refs['addOnlineForm'].validate((valid) => {
        if (valid) {
          this.$bus.$emit("show-loading", true);
          const params = this.addOnlineForm;
          if(params.id){
            API.doUpdateOnlineMedium(params).then((res) => {
              if (res.key === 1000) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.addOnlineDialogVisible = false;
                this.rePosts();
              }
              this.$bus.$emit("show-loading", false);
            });
          }else{
            API.doAddOnlineMedium(params).then((res) => {
              if (res.key === 1000) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.addOnlineDialogVisible = false;
                this.rePosts();
              }
              this.$bus.$emit("show-loading", false);
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addOnlineHandleClose(){
      this.addOnlineDialogVisible = false;
    },
    addOnline(){
      this.onlineFormTitle = "新增线上媒体";
      this.addOnlineForm = {
        plateName: '',
        onlineUserType: null,
        fans: '',
        cost: '',
        goodPrice: '',
        id: null,
        remark: '',
        createType: '',
        steadyContent: '',
        pic: '',
        oneInteractionNum: '',
        oneExposureNum: '',
      };
      this.addOnlineDialogVisible = true;
    },
    handleClick(tab, event){
      this.activeName = tab;
      this.searchForm = {
        keyword: "",
        userType: null,
        offlineType: null,
      };
      if(tab == 'online'){
        this.getSysLabel21();
        this.pageNum = 1;
        this.dataList = [];
        this.getPost();
      } else if(tab == 'offline'){
        this.pageNum = 1;
        this.dataList = [];
        this.getSysLabel20();
      }
    },
    formatterTime(time) {
      if (time) {
        return this.$moment(new Date(time)).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "-";
      }
    },
    formatterOfflineStatus(row){
      return row.status == 1 ? '合作中' : row.status == 2 ? '已到期' : row.status == 3 ? '待签约' : '未知'
    },
    // 分页pageSize改变
    handleSizeChange(e) {
      this.pageSize = e;
      this.rePosts();
    },
    // 分页pageNum改变
    handleCurrentChange(e) {
      this.pageNum = e;
      if(this.activeName == 'online'){
        this.getPost();
      }else if(this.activeName == 'offline'){
        this.getOffPost();
      }
    },
    // 重新请求
    rePosts() {
      this.pageNum = 1;
      this.dataList = [];
      if(this.activeName == 'online'){
        this.getPost();
      }else if(this.activeName == 'offline'){
        this.getOffPost();
      }
    },
    getPost() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      if (this.searchForm.keyword) {
        params.keyword = this.searchForm.keyword;
      }
      if (this.searchForm.userType) {
        params.userType = this.searchForm.userType;
      }
      API.getMediumOnlineList(params).then((res) => {
        if (res.key === 1000) {
          this.total = res.result.count;
          res = res.result.list;
          res.forEach(item => {
            if (item.createTime){
              item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm");
            }
          })
          this.dataList = res;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getOffPost() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      if (this.searchForm.keyword) {
        params.keyword = this.searchForm.keyword;
      }
      if (this.searchForm.offlineType) {
        params.excelShowTitleId = this.searchForm.offlineType;
      }else{
        if(this.offlineTypeList && this.offlineTypeList.length > 0){
          this.searchForm.offlineType = this.offlineTypeList[0]
          params.excelShowTitleId = this.offlineTypeList[0]
        }
      }
      API.getMediumOfflineList(params).then((res) => {
        if (res.key === 1000) {
          this.total = res.result.count;
          res = res.result.list;
          res.forEach(item => {
            if (item.createTime){
              item.createDate = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm");
            }
            if (item.startTime){
              item.createDate = this.$moment(item.startTime).format("YYYY-MM-DD");
            }
            if (item.expirationTime){
              item.expirationDate = this.$moment(item.expirationTime).format("YYYY-MM-DD");
            }
            item.putInCycleType = '周'
            if(item.putInCycle){
              item.putInCycleShow = item.putInCycle
              let a = item.putInCycle;
              if(a.indexOf("天") > 0){
                item.putInCycle = a.substring(0, a.indexOf("天"));
                item.putInCycleType = '天'
              }else if(a.indexOf("周") > 0){
                item.putInCycle = a.substring(0, a.indexOf("周"));
                item.putInCycleType = '周'
              }else{
                item.putInCycle = a.substring(0, a.indexOf("月"));
                item.putInCycleType = '月'
              }
            }
          })
          this.dataList = res;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getSysLabel20() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        sysLabelIds: '31,57',
      };
      APISysLabel.getSysLabelValueManageList(params).then((res) => {
        if (res.key === 1000) {
          this.offlineTypeList = res.result.data[31];
          this.cityShowList = res.result.data[57];
          if(this.offlineTypeList && this.offlineTypeList.length > 0){
            this.searchForm.offlineType = this.offlineTypeList[0].id
          }
          this.exportNameList = res.result.data[31];
          this.getOffPost();
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getSysLabel21() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        sysLabelIds: '21',
      };
      APISysLabel.getSysLabelValueManageList(params).then((res) => {
        if (res.key === 1000) {
          this.onlineUserType = res.result.data[21];
        }
        this.$bus.$emit("show-loading", false);
      });
    },
  },
};
</script>

<style>
.mask-img-del-size{
  width: 50px;
  text-align: center;
  height: 50px;
  margin: 25px;
}
.mask-img{
  position: absolute;
  margin-top: -100px;
  width: 100%;
  height: 100%;
  bottom: 0;
  background: rgba(101, 101, 101, 0.6);
  color: #ffffff;
  opacity: 0;
  margin-left: -10px;
}
.banner-pic-sub .mask-img:hover{
  opacity: 1;
  cursor: pointer;
}
.el-upload__tip{
  color: #969799;
  margin-top: 0;
  height: 30px;
  line-height: 30px;
}
.avatar-uploader .el-upload .avatar-uploader-icon{
  width: 100px;
  height: 100px;
  line-height: 100px !important;
}
</style>

<style lang="sass">

.avatar-uploader-icon
  font-size: 28px
  color: #8c939d
  width: 178px
  height: 178px
  line-height: 178px !important
  text-align: center
.device-list
  padding-top: 26px
  @include container
.editDialog
  .el-dialog__header
    border-bottom: 1px solid #EFEFEF
    .el-dialog__headerbtn
      font-size: 20px
  .el-dialog__footer
    text-align: left
    margin-left: 120px

</style>
